<template>
  <header class="header container">
    <div class="logo">
      <img class="logo-img" src="@/assets/logo/logo1.png" />
      <span class="line"></span>
      <span class="logo-info">智能商业信息平台</span>
    </div>
    <div class="sub-btn">
      <!-- href="/member-rights"  -->
      <a class="btn-member" target="_blank">
        <img class="icon" src="@/assets/images/home/vip.png" alt="" />
        <span>会员权益</span>
      </a>
      <a href="/login?redirect=/project-personnel">登录</a>
      <a href="/register">注册</a>
    </div>
  </header>
  <main class="main">
    <section class="page-first">
      <figure class="featured-figure">
        <img class="featured-image" src="@/assets/images/home/668bc88e31b8f7493aafe098.jpg" loading="lazy" width="1920"
          height="1090" alt="">
      </figure>
      <section class="info">
        <section class="container">
          <div class="p1">中凰科技</div>
          <div class="p2">智能商业信息平台</div>
          <el-button type="primary" class="btn">立即体验</el-button>
        </section>
      </section>
    </section>
    <section class="container page-second">
      <div class="p1">大数据+AI技术</div>
      <div class="p2">通过大数据+AI技术深入解决业务痛点，实现业绩突破</div>
    </section>
    <section class="page-third">
      <section class="container">
        <div class="content">
          <div class="box">
            <ul class="side">
              <li v-for="(item, index) in tab" :key="index" :class="{ on: index === activeIndex }"
                @click="handleChangeTab(index)">{{ item.label }}</li>
            </ul>
            <div class="side-content">
              <img :src="tab[activeIndex].icon" alt="" />
              <div class="info">
                <div class="title">{{ tab[activeIndex].label }}</div>
                <div class="title-line"></div>
                <div class="cnt">{{ tab[activeIndex].content }}</div>
              </div>
            </div>
          </div>
          <div class="round-big"></div>
        </div>
        <div class="round-bar">
          <div class="round"></div>
        </div>
        <div class="line"></div>
      </section>
    </section>
    <section class="page-four">
      <figure class="featured-figure">
        <img class="featured-image" src="@/assets/images/home/668a023aa72407caac4dee87.jpg" loading="lazy" width="1920"
          height="584" alt="">
      </figure>
      <section class="info">
        <section class="container">
          <div class="p1">技术核心，驱动未来</div>
          <el-button type="primary" class="btn">立即体验</el-button>
        </section>
      </section>
    </section>
  </main>
  <footer class="footer">
    <section class="container">
      <div class="footer-info">
        <div class="logo">
          <img class="logo-img" src="@/assets/logo/logo2.png" />
        </div>
        <div class="info">
          <div class="p1">联系我们</div>
          <div class="p2">
            <span>服务热线:0791-1223456</span>
            <span>邮箱:1121212121@qq.com</span>
          </div>
          <div class="p2">地址:江西省南昌市某某区某某街道某某路</div>
        </div>
        <div class="qr-bar">
          <div>
            <img src="https://img.js.design/assets/img/622e9d61fcdca696944c253c.png#010d91b259531f4154e35e4b78c9c1ed"
              alt="">
            <el-button type="primary" class="btn">关注公众号</el-button>
          </div>
          <div>
            <img src="https://img.js.design/assets/img/622e9d61fcdca696944c253c.png#010d91b259531f4154e35e4b78c9c1ed"
              alt="">
            <el-button type="primary" class="btn">联系客服</el-button>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="line"></div>
        <div class="p">江西中凰科技有限公司</div>
        <div class="p">赣ICP备2023007041号-3网2023007041号-3</div>
      </div>
    </section>
  </footer>
</template>

<script setup>
import tab1 from '@/assets/images/home/tab1.png'
import tab2 from '@/assets/images/home/tab2.png'
import tab3 from '@/assets/images/home/tab3.png'
const activeIndex = ref(0)
const tab = ref([
  {
    label: '海量信息',
    value: 0,
    content: '将技术与场景深度融合，渗透各垂直领域，为合作伙伴的数字化升级持续增能',
    icon: tab1,
  }, {
    label: '结构图谱',
    value: 1,
    content: '1将技术与场景深度融合，渗透各垂直领域，为合作伙伴的数字化升级持续增能',
    icon: tab2,
  }, {
    label: '数据准确',
    value: 2,
    content: '2将技术与场景深度融合，渗透各垂直领域，为合作伙伴的数字化升级持续增能',
    icon: tab3,
  }
])
function handleChangeTab(index) {
  activeIndex.value = index
}
</script>

<style lang='scss' scoped>
.btn {
  border-radius: 0;
  font-size: 24px;
  height: 64px;
  padding: 0 40px;
}

.main {
  min-width: 1320px;
}

.container {
  max-width: 1320px;
  min-width: 1320px;
  margin: 0 auto;
}

.header {
  display: flex;
  height: 80px;
  justify-content: space-between;
  align-items: center;

  .logo {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: 700;

    .logo-img {
      width: 160px;
      margin-left: 4px;
    }

    .logo-txt {
      font-style: italic;
    }

    .line {
      width: 1px;
      height: 19px;
      opacity: 0.6;
      background: rgba(220, 222, 224, 1);
      margin: 0 10px 0 14px;
    }

    .logo-info {
      color: rgba(56, 56, 56, 1);
      font-size: 14px;
    }
  }

  .sub-btn {
    display: flex;
    align-items: center;
    padding-right: 32px;

    a {
      color: rgba(34, 34, 34, 1);
      font-size: 16px;
      display: block;
      margin-left: 40px;
    }
  }

  .btn-member {
    color: rgba(191, 136, 40, 1) !important;
    border: 1px solid rgba(210, 162, 84, 1);
    border-radius: 60px;
    background: linear-gradient(180deg, rgba(255, 249, 240, 1) 0%, rgba(255, 236, 207, 1) 100%);
    font-size: 16px;
    font-weight: 400;
    height: 40px;
    padding: 0 20px 0 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;

    .icon {
      width: 34px;
      height: 34px;
    }
  }
}

.featured-figure {
  padding-top: 48.5%;
  position: relative;
  overflow: hidden;
  margin: 0;
}

.featured-image {
  height: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
}

.page-first {
  position: relative;
  min-width: 1320px;

  .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 20%;

    .p1 {
      font-size: 50px;
      font-weight: 700;
      color: #000;
    }

    .p2 {
      font-size: 60px;
      font-weight: 700;
      color: #cc392f;
      margin-top: 15px;
    }

    .btn {
      border-radius: 0;
      margin-top: 70px;
    }
  }
}

.page-second {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 80px 0 72px;

  .p1 {
    color: rgba(34, 34, 34, 1);
    font-size: 48px;
    font-weight: 500;

  }

  .p2 {
    color: rgba(100, 101, 102, 1);
    font-size: 24px;
    margin-top: 15px;
  }
}

.page-four {
  position: relative;
  min-width: 1320px;

  .featured-figure {
    padding-top: 30%;
  }

  .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 76px;

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .p1 {
      color: rgba(34, 34, 34, 1);
      font-size: 48px;
      font-weight: 500;
    }

    .btn {
      margin-top: 20px;
    }
  }
}

.page-third {
  .container {
    position: relative;
  }

  .content {
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(7px);
    width: 1306px;
    height: 435px;
    padding-left: 43px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .box {
    display: flex;
    position: relative;
    z-index: 2;

    ul {
      border-right: 1px solid rgba(235, 237, 240, 1);
      padding-bottom: 12px;
    }

    li {
      color: rgba(56, 56, 56, 1);
      border-left: 4px solid transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 24px;
      width: 237px;
      height: 77px;
      padding-left: 35px;
    }

    li.on {
      border-left-color: #cc392f;
      background: linear-gradient(90deg, rgba(204, 57, 47, 0.12) 0%, rgba(204, 204, 204, 0) 100%);
      color: #cc392f;
    }

    .side-content {
      display: flex;
      margin-left: 32px;

      img {
        width: 340px;
        margin-right: 80px;
      }

      .info {
        position: relative;
      }

      .title {
        color: rgba(56, 56, 56, 1);
        font-size: 32px;
      }

      .title-line {
        width: 4px;
        height: 77px;
        opacity: 1;
        transform: rotate(-90deg);
        background: linear-gradient(180deg, rgba(204, 57, 47, 0) 0%, #cc392f 100%);
        margin-top: 30px;
        position: absolute;
        left: 34px;
        top: 10px;
      }

      .cnt {
        color: rgba(56, 56, 56, 1);
        font-size: 18px;
        line-height: 36px;
        margin-top: 76px;
        width: 342px;
      }
    }
  }

  .round-big {
    background: linear-gradient(148.76deg, rgba(240, 118, 112, 0) 0%, rgba(240, 118, 112, 0.22) 100%);
    box-shadow: inset 0px -27px 45px rgba(255, 255, 255, 0.96);
    border-radius: 100%;
    width: 437px;
    height: 437px;
    position: absolute;
    right: -41px;
    top: -110px;
    z-index: 1;
  }

  .round-bar {
    border: 1px solid rgba(235, 237, 240, 1);
    border-radius: 100%;
    width: 190px;
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 15px;
    left: -95px;
    z-index: 1;
  }

  .round {
    background: linear-gradient(125.31deg, rgba(240, 83, 74, 1) 0%, rgba(240, 83, 74, 0) 100%);
    border-radius: 100%;
    width: 96px;
    height: 96px;
  }

  .line {
    background: #cc392f;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 240px;
  }
}

.footer {
  background: rgba(51, 51, 51, 1);
  min-width: 1320px;
}

.footer-info {
  display: flex;
  color: #fff;
  justify-content: space-between;
  padding: 63px 0 44px;

  .logo {
    display: flex;
    align-items: center;
    font-size: 28px;
    margin-left: 42px;
    padding-left: 4px;

    .logo-img {
      width: 160px;
    }

    .logo-txt {
      font-style: italic;
    }
  }

  .p1 {
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 10px;
  }

  .p2 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 40px;
    display: flex;

    span {
      margin-right: 40px;
    }
  }
}

.footer-copyright {
  padding: 0 42px 28px;

  .line {
    border-top: 0.5px solid rgba(255, 255, 255, 0.2);
    height: 20px;
  }

  .p {
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    font-size: 14px;
  }
}

.qr-bar {
  display: flex;
  padding-right: 54px;

  div {
    display: flex;
    flex-direction: column;
    margin-left: 20px;

    img {
      width: 114px;
      height: 114px;
    }

    .btn {
      font-size: 16px;
      font-weight: 400;
      height: 36px;
      margin-top: 12px;
      padding: 0 10px;
    }
  }
}
</style>
